<template>
  <div class="grade_show" >
    <el-row>
      <el-col :span="12">
        <label>班&nbsp;&nbsp;级：</label>
          {{classData.trainClassName}}({{classData.classType}})</el-col>
      <el-col :span="12">
        <label>课&nbsp;&nbsp;程： </label>
        {{classData.trainCourseName}}</el-col>                      
    </el-row>
    <el-row>
      <el-col :span="12">
        <label>校&nbsp;&nbsp;区： </label>
        {{classData.trainSchoolList && classData.trainSchoolList.length > 0 ? classData.trainSchoolList.join('、')  : (classData.schoolName ? classData.schoolName :'待完善')}}
      </el-col>
      <el-col :span="12">
      <label>班&nbsp;&nbsp;别：</label>
        {{classData.classType}}</el-col>
    </el-row>
    <el-row>
      <el-col :span="12">
        <label>开课状态：</label>
        <span>{{['未开课', '上课中', '已上完'][classData.startStatus]}}</span>
      </el-col>
      <el-col :span="12" v-if="classData.lessonCount">
        <label>课时：</label>
        <span>{{classData.lessonCount}}</span>
      </el-col>
    </el-row>

    <hr class="horizon-line" v-if="courseType!=0" />

    <el-row v-if="courseType!=0">
      <el-col :span="24">
        <timeline timelineTheme="lightblue">
          <timeline-item 
            v-for="(item,index) in classData.classCycle"
            :key="index"
            color="#3ac099">
            <el-row class="cycle-week">
              <el-col :span="9" class="day">
                每{{item.weekCode | getWeekDay}}&nbsp;&nbsp;&nbsp;&nbsp;{{getParenTime(item.begTime)}} - {{getParenTime(item.endgTime)}}
              </el-col>
              <el-col :span="15">
                <p>
                  <label>主教练：</label>
                  <span class="coach-items">{{item.manager}}</span>
                </p>
                <p>
                  <label>助理教练：</label>
                  <template v-for="coach in item.listAssistantCoach">
                    <span class="coach-items">{{coach}}</span>
                  </template>
                </p>
                <p>
                  <label>课程顾问：</label>
                  <template v-for="coach in item.listCounselor">
                    <span class="coach-items">{{coach}}</span>
                  </template>
                </p>
              </el-col>
            </el-row>
          </timeline-item>
        </timeline>
      </el-col>
    </el-row>

    <!--专业课的教练都相同-->
    <el-row v-else>
      <div v-if="classData.classCycle && classData.classCycle.length">
        <el-col :span="12">
          <p>
            <label>主教练：</label>
            <span class="coach-items">{{classData.classCycle[0].manager}}</span>
          </p>
        </el-col>
        <el-col :span="12">
          <p>
            <label>助理教练：</label>
            <template v-for="coach in classData.classCycle[0].listAssistantCoach">
              <span class="coach-items">{{coach}}</span>
            </template>
          </p>
        </el-col>
        <el-col :span="12">
          <el-row >  
            <el-col :span="5" style="padding: 0"><label>上课周期：</label></el-col>
            <el-col :span="14">
              <p v-for="item in classData.classCycle"
                :key="item.weekCode"> 
                每{{item.weekCode | getWeekDay}}&nbsp;&nbsp;&nbsp;&nbsp;{{getParenTime(item.begTime)}} - {{getParenTime(item.endgTime)}}
              </p>
            </el-col>
          </el-row>
        </el-col>
        <el-col :span="12">
          <p>
            <label>课程顾问：</label>
            <template v-for="coach in classData.classCycle[0].listCounselor">
              <span class="coach-items">{{coach}}</span>
            </template>
          </p>
        </el-col>
      </div>
    </el-row>

  </div>
</template>
<script>
import { Timeline, TimelineItem, TimelineTitle } from 'vue-cute-timeline'
import {parseTime} from 'utils'
export default {
  components: {
    Timeline, TimelineItem, TimelineTitle
  },
  props: {
    classData: [Array, Object, String],
    courseType: [Number, String] // 0:专业课，1：综合， 2：次课
  },
  data () {
    return {}
  },
  methods: {
    getParenTime (time) {
      return parseTime(time, '{h}:{i}')
    }
  }
}
</script>
<style lang="scss">
.grade_show{
  margin-top: 10px;
  padding: 35px 25px 17px 25px;
  background: #fff;
  border: 1px solid #dcdcdc;
  border-radius: 5px;
  box-shadow: 3px 3px 3px #eee;
  label{
    color:#909090;
  }
  .el-col{
    margin:0 0 12px 0;
    line-height:1.5;
    padding:0 10px;
  }
  .alink_color{
    color:#2a82ee;
    &:hover{
      cursor: pointer;
    }
  }
}
.coach-items{
  margin-right: 10px;
}
.horizon-line{
  margin:20px 0 25px;
}
.timeline-item{
  border-bottom: 0;
  .cycle-week{
    .day{
      color: #2e2e2e;
      font-weight:700;
    }
  }
}
</style>